<!DOCTYPE html>
<html chrome_comp_test="invisible_element_overflow">
<head>
<style>
div.container {
  background: #ddd;
  height: 100px;
  overflow: auto;
  position: relative;
  width: 100px;
}
div.container div.invisible {
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  position: absolute;
}
</style>
</head>
<body>
<h1>BX8037</h1>

<p>1. overflow in horizontal direction by using a wider width</p>
<div class="container">
  <div class="invisible" style="width:120px; height:0;" expectedProblems="BX8037"></div>
</div>
<br />

<p>2. overflow in horizontal direction by using offset properties</p>
<div class="container">
  <div class="invisible" style="position:absolute; left:120px; width:0; height:10px;" expectedProblems="BX8037"></div>
</div>
<br />

<p>3. overflow in vertical direction by using margin</p>
<div class="container">
  <div class="invisible" style="margin-top:120px; width:1px; height:0;" expectedProblems="BX8037"></div>
</div>
<br />

<p>4. overflow in vertical direction by using a larger height</p>
<div class="container">
  <div class="invisible" style="width:0; height:120px;" expectedProblems="BX8037"></div>
</div>
<br />

<hr />


<h2>The followings don't have problems</h2>
<p>A1. with padding</p>
<div class="container">
  <div class="invisible" style="position:absolute; width:120px; height:0; padding:10px;"></div>
</div>
<br />

<p>A2. with border</p>
<div class="container">
  <div class="invisible" style="position:absolute; width:120px; height:0; border:10px solid transparent;"></div>
</div>
<br />

<p>A3. the descendant's containing block is different</p>
<div style="position:relative;">
  <div class="container" style="position:static;">
    <div class="invisible" style="position:absolute; font-size:20px; width:120px; background:#eee; line-height:normal;">position</div>
  </div>
</div>

<p>A4. zero width and height, using offset</p>
<div class="container">
  <div class="invisible" style="position:absolute; top:120px; left:-200px; width:0; height:0;"></div>
</div>
<br />

<p>A5. zero width and height, using negative margin</p>
<div class="container">
  <div class="invisible" style="margin-left:120px; margin-top:-200px; width:0; height:0;"></div>
</div>

<p>(End of test)</p>

</body>
</html>